<template>
  <el-form
    ref="formRef"
    :model="dynamicValidateForm"
    label-width="auto"
    class="demo-dynamic"
  >
    <div class="inline-content">
      <el-form-item
        prop="code"
        label="物料号"
        :rules="[
          {
            required: true,
            message: '请输入产品物料号',
            trigger: 'blur',
          }
        ]"
      >
        <el-input v-model="dynamicValidateForm.code" />
      </el-form-item>
      <el-form-item
        prop="drawingNo"
        label="产品图号"
        :rules="[
          {
            required: true,
            message: '请输入产品图号',
            trigger: 'blur',
          }
        ]"
      >
        <el-input v-model="dynamicValidateForm.drawingNo" />
        
      </el-form-item>

       <el-form-item
            prop="type"
            label="产品类型"
            :rules="[
              {
                required: true,
                message: '请输入产品类型',
                trigger: 'blur',
              }
            ]"
      >
          <el-select 
            
          v-model="dynamicValidateForm.type" placeholder="Select" style="width: 240px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
      </el-form-item>
      
    </div>
   

    <!-- 遍历生成每一行工序 -->
    <div v-for="(step, index) in dynamicValidateForm.steps"  class="inline-content">
      <!-- 工序号的校验 -->
      <el-form-item
        :label="'工序' + (index+1)"
        :prop="'steps.' + index + '.seq'" 
        :rules="[
          { required: true, message: '工序号不能为空', trigger: 'blur' }
        ]"
      >
        工序号：<el-input v-model="step.seq" style="width: 300px;"/>
      </el-form-item>

      <!-- 工序名的校验 -->
      <el-form-item
        :prop="'steps.' + index + '.name'" 
        :rules="[
          { required: true, message: '工序名不能为空', trigger: 'blur' },
          { min: 2, message: '工序名至少2个字符', trigger: 'blur' } 
        ]"
      >
        工序名：<el-input v-model="step.name" style="width: 300px;"/>
      </el-form-item>

      <!-- 删除按钮 -->
      <el-button @click.prevent="removestep(step)">
        Delete
      </el-button>
    </div>
    <el-form-item>
      <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
      <el-button @click="addstep">New step</el-button>
      <el-button @click="resetForm(formRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

import type { FormInstance } from 'element-plus'

const options = [
  {
    value: '变速箱',
    label: '变速箱',
  },
  {
    value: '驱动桥',
    label: '驱动桥',
  },
  {
    value: '减速机',
    label: '减速机',
  }]

const formRef = ref<FormInstance>()
const dynamicValidateForm = reactive<{
  steps: stepItem[]
  code: string
  drawingNo: string
  type:string
}>({
  steps: [
    {
      seq: '',
      name:''
    },
  ],
  code: '',
  drawingNo: '',
  type:''
})

interface stepItem {
  seq:string
  name:string
}

const removestep = (item: stepItem) => {
  const index = dynamicValidateForm.steps.indexOf(item)
  if (index !== -1) {
    dynamicValidateForm.steps.splice(index, 1)
  }
}


const addstep = () => {
  dynamicValidateForm.steps.push({
    seq: '',
    name:''
  })
}


const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async(valid) => {
    if (valid) {
      await $fetch('/api/product',{
        method:'post',
        body:dynamicValidateForm
      })
      emit('submit')
    } else {
      console.log('error submit!')
    }
  })
}

const emit = defineEmits(['submit'])

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style lang="css" scoped>
.inline-content {
  display: flex; /* 启用Flex布局 */
  align-items: center;
  gap: 16px; /* 元素之间的间距（可选，根据需要调整） */
  margin-bottom: 16px; /* 行与行之间的间距（可选） */
  align-items: center; /* 确保垂直居中 */
  height: 60px; /* 可选：固定行高，避免元素高度不一致导致对齐问题 */
}
</style>